/*
 * @Author: liu.lin liu.lin@hzleaper.com
 * @Date: 2023-11-15 15:07:46
 * @LastEditors: liu.lin liu.lin@hzleaper.com
 * @LastEditTime: 2023-11-24 16:59:36
 * @FilePath: \aoi_link_frontend\src\page\line-yield-analyse\component\Echart\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import options from './options';
import './index.less';
import { DataSourceType } from './index.type';

type PropType = {
  //   option: any;
  dataSource: DataSourceType[];
};

const LineYieldAnalyseEchart: FC<PropType> = (props: PropType) => {
  const [chart, setChart] = useState<echarts.ECharts>();

  const [dataSource, setDataSource] = useState<DataSourceType[]>([]);

  useEffect(() => {
    initializeChart();
    return window.removeEventListener('resize', () => chart && chart.resize());
  }, [props.dataSource]);

  useEffect(() => {
    setDataSource(props.dataSource);
  }, [props.dataSource]);
  //   useEffect(() => {
  //     // console.log('render', JSON.stringify(props.option));
  //     chart?.setOption(props.option, true);
  //   }, [props.option]);

  const initializeChart = () => {
    // 基于准备好的dom，初始化echarts实例
    const element = document.getElementById('line_echart');
    console.log(`dataSource`, dataSource);
    getSource(dataSource);
    let myCharts;
    if (element) {
      myCharts = echarts.init(element);
      setChart(myCharts);
      myCharts?.setOption(options);
    } else {
      console.log(`获取dom失败`);
    }

    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
    // console.log('render first ', option);
    // echartStore.getEchartData(myCharts)
    window.addEventListener('resize', () => myCharts.resize());
  };

  const getSource = (dataSource: DataSourceType[]) => {
    const dates = new Set<string>(); // 使用 Set 来存储唯一的日期字符串

    dataSource.forEach(item => {
      dates.add(item.genTimeStr); // 将日期字符串作为元素的第一个位置，这里假设日期字符串是 item 的第一个元素
    });

    const uniqueDates = Array.from(dates);
    console.log(`uniqueDates`, uniqueDates);
  };

  return <div id="line_echart"></div>;
};
export default LineYieldAnalyseEchart;
